<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="net.ifilm.entity.FilmType" %>
<%@ page import="java.util.List" %>
<%@ page import="net.ifilm.entity.PageCount" %>
<%
    List<FilmType> filmTypes = (List<FilmType>)request.getAttribute("filmTypes");
    PageCount pageCount = (PageCount)request.getAttribute("pageCount");
%>
<html>
<head>
    <title>电影类型列表</title>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/bg/css/bg.css" type="text/css" />
    <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
    <style type="text/css">
        td img { cursor:pointer; }
        table tr:hover { background-color: #87ceeb; }
    </style>
    <script type="text/javascript">

        function showErrorMsg(messageDiv, errorMsg) {
            messageDiv.style.display = 'block';
            messageDiv.innerHTML = "<span>警告：</span>" + errorMsg;
        }

        function addFilmType() {
            var pannel = document.getElementById('pannel');

            var input = document.createElement('input');
            input.title = '必选，不超过20个字符，建议4个字符';
            input.type = 'text';
            input.size = 8;
            input.id = 'newFilmType';
            var addLink = document.createElement('a');
            addLink.innerHTML = '确定';
            addLink.href = 'javascript:void(0);';
            addLink.onclick = function() {
                var newFilmType = document.getElementById('newFilmType').value;
                if (newFilmType == "" || newFilmType.length == 0) {
                    document.getElementById('newFilmType').value = '';
                    document.getElementById('newFilmType').focus();
                    showErrorMsg(document.getElementById('message'), "类型名称不能为空！");
                    return;
                }
                if (newFilmType.length > 20) {
                    document.getElementById('newFilmType').value = '';
                    document.getElementById('newFilmType').focus();
                    showErrorMsg(document.getElementById('message'), "类型名称长度不能超过20个字符！");
                    return;
                }

                $.ajax({type:'post', url:'addFilmType.html', data:'newFilmType=' + encodeURI(newFilmType),
                    contentType: "application/x-www-form-urlencoded;charset=utf-8", success:function(data) {
                    if (data == null || data == "") { // 没有错误信息，增加成功
                        location.href = 'filmTypeList.html?page=<%=pageCount.getCurrentPage()%>';
                    } else { // 有错误信息，增加失败
                        showErrorMsg(document.getElementById('message'), data);
                    }
                }});
            }
            var delLink = document.createElement('a');
            delLink.innerHTML = '取消';
            delLink.href = 'javascript:void(0);';
            delLink.onclick = function() {
                pannel.removeChild(input);
                pannel.removeChild(addLink);
                pannel.removeChild(delLink);
                $("a:contains('+')").css("display", "inline");
            }

            pannel.appendChild(input);
            pannel.appendChild(addLink);
            pannel.appendChild(delLink);
            $("a:contains('+')").css("display", "none");
        }

        function selectAll(chk_all) {
            var chk_list = document.getElementsByName('chk_list');
            for (var i = 0; i < chk_list.length; i++) {
                chk_list[i].checked = chk_all.checked;
            }
        }

        function delFilmType() {
            var chk_list = document.getElementsByName('chk_list');

            var i;
            for (i = 0; i < chk_list.length; i++) {
                if (chk_list[i].checked == true) break;
            }

            if (i == chk_list.length) {
                showErrorMsg(document.getElementById('message'), "请至少选择一个目标进行删除！");
                return;
            }

            var idList = "";
            for (i = 0; i < chk_list.length; i++) {
                if (chk_list[i].checked == true) {
                    idList = idList + chk_list[i].value;
                    if (i != chk_list.length - 1) idList = idList + ',';
                }
            }

            location.href = "delFilmType.html?filmTypeIdList="
                    + idList + "&currentPage=<%=pageCount.getCurrentPage()%>";
        }

        function updTypeName(filmTypeId) {
            var inputText = prompt('请输入类型名称');
            if (inputText == null || inputText == '') return;

            $.ajax({type:'GET', url:'updateTypeName.html', data:'typeName=' + encodeURIComponent(encodeURIComponent(inputText)) + '&filmTypeId=' + filmTypeId,
                success:function(data) {
                if (data == 0) location.href = 'filmTypeList.html?page=<%=pageCount.getCurrentPage()%>';
                else showErrorMsg(document.getElementById('message'), '类型名称[' + inputText + ']已经存在！');
            }});
        }
    </script>
</head>
<body>

<div id="listDiv">
    <div id="message"></div>
    <table>
        <col width="1%">
        <col width="3%">
        <col width="90%">
        <col width="5%">
        <thead>
            <tr>
                <th><input type="checkbox" onclick="selectAll(this);"/></th>
                <th align="center">ID</th>
                <th>类型名称</th>
                <th>控制</th>
            </tr>
        </thead>
        <tbody>
            <%
                for (FilmType filmType : filmTypes) {
            %>
                <tr>
                    <td><input name="chk_list" type="checkbox" value="<%=filmType.getFilmTypeId()%>"/></td>
                    <td align="center" style="background-color: #808080;"><%=filmType.getFilmTypeId()%></td>
                    <td align="center" ondblclick="updTypeName(<%=filmType.getFilmTypeId()%>);"
                            class="someClass" title="双击进行类型名称的修改">
                        <%=filmType.getTypeName()%>
                    </td>
                    <td align="center">
                        <img class="someClass" title="删除此条明星纪录" src="/images/delete.png"
                             onclick="location.href='delFilmTypeById.html?filmTypeId=<%=filmType.getFilmTypeId()%>&currentPage=<%=pageCount.getCurrentPage()%>'"/>
                    </td>
                </tr>
            <%
                }
            %>
        </tbody>
    </table>

    <div id="pannel">
        <a href="javascript:delFilmType();" class="someClass" title="批量删除电影类型">-</a>
        <a href="javascript:addFilmType();" class="someClass" title="增加新的电影类型">+</a>
    </div>

    <div id="control">
        <%
            int currentPage = pageCount.getCurrentPage();
            int totalPages = pageCount.getTotalPage();
        %>
        <a href="javascript:location.href='filmTypeList.html?page=1'" class="someClass" title="跳转到首页"><<</a>
        <% if (currentPage == 1) { %>
        <a href="javascript:void(0);" style="background-color: #808080;"><</a>
        <% } else { %>
        <a href="javascript:location.href='filmTypeList.html?page=<%=currentPage - 1%>'" class="someClass" title="跳转到上一页"><</a>
        <% } %>
        <label><%=currentPage%>,<%=totalPages%> 页</label>
        <% if (currentPage == totalPages){ %>
        <a href="javascript:void(0);" style="background-color: #808080;">></a>
        <% } else { %>
        <a href="javascript:location.href='filmTypeList.html?page=<%=currentPage + 1%>'" class="someClass" title="跳转到下一页">></a>
        <% } %>
        <a href="javascript:location.href='filmTypeList.html?page=<%=totalPages%>'" class="someClass" title="跳转到尾页">>></a>

        <div>
            跳转到
            <select onchange="location.href = 'filmTypeList.html?page=' + this.value">
                <% for (int i = 1; i <= totalPages; i++) { %>
                <option value="<%=i%>" <%=currentPage==i?"selected":""%>><%=i%>页</option>
                <% } %>
            </select>
        </div>
    </div>


</div>

</body>
</html>